<template>
  <div class="preview-container">
    <iframe v-if="isPdf" :src="pdfSrc" frameborder="0"></iframe>
    <iframe v-else-if="isDocOrXlsOrPpt" :src="docOrXlsOrPptSrc" frameborder="0"></iframe>
    <!-- <embed v-else-if="isDocOrXlsOrPpt" :src="docOrXlsOrPptSrc" type="application/pdf"></embed> -->
    <video v-else-if="isVideo" controls>
      <source :src="videoSrc" />
      您的浏览器不支持 video 标签。
    </video>
    <img v-else-if="isImage" :src="imageSrc" alt="图片预览"/>
    <pre v-else-if="isText" class="text-content">{{ textContent }}</pre>
    <p v-else>不支持的文件格式</p>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, onBeforeUnmount, ref, watch } from 'vue';

export default defineComponent({
  props: {
    file: {
      type: File,
      required: true
    },
    fileType: {
      type: String,
      required: true
    }
  },
  setup(props) {
    const fileUrl = ref<string | null>(null);
    const textContent = ref<string>('');

    // 定义所有计算属性，直接从 props.file 获取类型
    const isImage = computed(() => ['jpeg', 'png', 'gif'].includes(props.fileType));
    const isPdf = computed(() => props.fileType === 'pdf');
    const isVideo = computed(() => ['mp4', 'mov', 'avi'].includes(props.fileType));
    const isText = computed(() => props.fileType === 'txt');
    const isDoc = computed(() => ['doc', 'docx'].includes(props.fileType));
    const isOfd = computed(() => props.fileType === 'ofd');
    const isDwg = computed(() => props.fileType === 'dwg');
    const isExcel = computed(() => ['xls', 'xlsx'].includes(props.fileType));
    const isPowerpoint = computed(() => ['ppt', 'pptx'].includes(props.fileType));
    const isDocOrXlsOrPpt = computed(() => {
      return isDoc.value || isOfd.value || isDwg.value || isExcel.value || isPowerpoint.value;
    });


    // 动态计算文件的URL 和 文件内容
    watch(() => props.file, async (newFile) => {
      console.log('接收到文件:', newFile); // 调试信息
      if (newFile) {
        let url =  fileUrl.value = URL.createObjectURL(newFile);
        // window.open(url);
        // 确保所有计算属性都已定义后再使用它们
        if (isText.value) {
          try {
            textContent.value = await newFile.text();
          } catch (error) {
            console.error('读取文件失败:', error);
          }
        }
      }
    }, { immediate: true });

    // 清除URL对象以避免内存泄漏
    onBeforeUnmount(() => {
      if (fileUrl.value) {
        URL.revokeObjectURL(fileUrl.value);
      }
    });

    // 返回需要绑定到模板的数据或方法
    return {
      isPdf, isDocOrXlsOrPpt, isImage, isVideo, isText,
      pdfSrc: computed(() => isPdf.value ? fileUrl.value : null), // 直接使用 fileUrl 作为 src
      docOrXlsOrPptSrc: computed(() => isDocOrXlsOrPpt.value ? fileUrl.value : null),
      // docOrXlsOrPptSrc: computed(() => isDocOrXlsOrPpt.value ? `https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(fileUrl.value || '')}` : null),
      videoSrc: computed(() => isVideo.value ? fileUrl.value : null),
      imageSrc: computed(() => isImage.value ? fileUrl.value : null),
      textContent
    };
  }
});
</script>

<style scoped>
/* 样式保持不变 */
.preview-container {
  width: 100%;
  /* 设置最大高度为视口高度的80% */
  height: 900px;
  min-height: 500px;
  max-height: calc(100vh - 100px); /* 假设顶部导航栏高度为100px */
   /* 设置合适的高度 */
}

iframe, embed, img, video {
  width: 100%;
  height: 100%;
}

.text-content {
  white-space: pre-wrap;
  word-wrap: break-word;
  height: calc(100% - 20px); /* 减去可能的滚动条空间 */
  overflow: auto;
}

.preview-container {
  display: flex;
  flex-direction: column;

  overflow: auto; /* 当内容超出容器时显示滚动条 */
}

.preview-content {
  flex-grow: 1;
  overflow: auto; /* 确保内容区域可滚动 */
}


</style>